import "./index.css"
import Config from "./Config"
import { useEffect, useState } from "react"
export default () => {
  let list = new Array(20).fill({}).map((item, index) => ({
    name: index,
    age: (Math.random() * Math.random() * Math.random() + index) * 10000
  }))
  let [vaisible, setVisible] = useState(1)
  useEffect(() => {
    document.documentElement.addEventListener('click', (event) => {
      setVisible(vaisible++)
    })
  }, [])

  return <div className="dialog-box">
    <ul className="box">
      {
        list.map((item, index) => {
          return <li className="flex list" key={item.name}>
            <div>{index < 9 ? '0' + index : index}： {item.name}</div>
            <div>{item.age}</div>
            <Config vaisible={vaisible}></Config>
          </li>
        })
      }
    </ul>
  </div>
}